<template>
    <div>
        <h2 class="public-title"> 我的关注<div><i-switch v-model="followStatus" @on-change="setFollow"></i-switch>允许关注</div></h2>
        <div class="flListPanel" id="flListPanel">
            <Scroll :on-reach-bottom="getFollowList" :distance-to-edge="0" :loading-text="flLoadingText">
                <div class="noDataP" v-if="followList.length<1">
                    <img src="@/assets/images/tableNoData.png" />
                </div>
                <div class="flBox" v-for="(item,index) in followList" :key="index">
                    <div class="flBoxTlt" @click="showFlItem(item.id)">
                        <div>
                        <img :src="imgRequest+item.avatar" alt="">
                        {{item.nickname}}
                        <span class="levelImg" :class="`levelImg${item.honor_upgrade}`"></span>
                        </div>
                        
                        <Icon type="ios-arrow-forward" size="20"/>
                    </div>
                    <div v-if="followItemInfo.id==item.id" class="followItem">
                        <p>
                            <span>
                                <img src="@/assets/images/room/focus_list_icon@2x.png"/>近五笔投注记录
                            </span>
                            <button class="qxgzBtn vux-1px" @click="qxFollow(item.id,item.nickname)">取消关注</button>
                        </p>
                        <table class="flTable" v-if="followItemData.length>0">
                            <tr>
                            <th>彩种房间</th>
                            <th>期号</th>
                            <th>投注内容</th>
                            <th>金额</th>
                            </tr>
                            <tr v-for="(item1,index1) in followItemData" :key="index1">
                            <td>{{item1.lottery_name+(item1.room_name==null?'':item1.room_name)}}</td>
                            <td>{{item1.issue}}</td>
                            <td>{{item1.way}}</td>
                            <td>{{item1.money}}</td>
                            </tr>
                        </table>
                        <div v-else class="noDataP">
                            <img src="@/assets/images/tableNoData.png" />
                        </div>
                    </div>
                </div>
            </Scroll>
        </div>
    </div>    
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
    data() {
        return {
            showFlList: false,
            followList: [],
            isTourist: false,
            followStatus: true,
            flLoadingText: '加载中',
            followPage: 1,
            followItemInfo: {id: -1},
            followItemData: [],
        }
    },
    computed: {
        ...mapGetters(["accountData"])
    },
    created() {
        if (this.accountData.is_tourist && this.accountData.is_tourist === 1) {
            this.isTourist = true
        }
        this.getFollowList()
    },
    methods: {
        showFlItem(id) {
            if(this.followItemInfo.id==id){
                this.followItemInfo.id=-1
                return
            }
            let vm = this
            let params = {}
            params.token = localStorage.getItem('token')
            params.user_id=id
            vm.$http.post(vm.urlRequest + '?m=api&c=userfollow&a=followUserBetInfo', params).then(res => {
                if (res.data.status == 0) {
                this.followItemData=res.data.data
                this.followItemInfo=res.data.userData
                this.followItemInfo.id=id
                }else{
                this.$Message.warning('数据请求超时')
                }
            })
            },
        qxFollow: function(id,name){
        //取消关注
        this.$Modal.confirm({
            content: '<p>您确定要取消关注'+name+'吗？</p>',
            scrollable: true,
            loading: true,
            onOk: () => {
            this.$http.post(this.urlRequest + "?m=api&c=user&a=cancelFollowUser", {user_id:id, token: localStorage.getItem("token")}).then(res => {
                this.$Message.warning(res.data.ret_msg)
                if(res.data.status==0){
                    this.followPage=1
                    this.followList=[]
                    this.getFollowList(true)
                }
                this.$Modal.remove()
            })     
            }
        });
        
        },
        setFollow: function(){
          var status = ''
          if(this.followStatus){
              status=1
            }else{
              status=2
          }
          this.$http.post(this.urlRequest + '?m=api&c=userfollow&a=setFollowStatus', {token: localStorage.getItem('token'), follow_status: status}).then(res => {
            if(this.followStatus){
              this.$Message.success('允许关注成功', 'bottom')
            }else{
              this.$Message.success('禁止关注成功', 'bottom')
            }
          })
        },
        getFollowList: function(flag){
            //获取我的关注列表
            if(this.isTourist){
                this.$Message.warning('游客不能关注！')
                return
            }
            let params = {};
            params.token = localStorage.getItem('token');
            params.page=this.followPage
            if(!this.showFlList||flag){
                this.$http.post(this.urlRequest + "?m=api&c=userfollow&a=followUserList",params).then(res => {
                if(res.data.data!=null){
                    this.followList = this.followList.concat(res.data.data)
                    console.log(this.followList, 'followList')
                    this.followPage+=1
                }
                })
            }
            // let dataName = {};
            // dataName.token = localStorage.getItem('token')
            // this.$http.post(this.urlRequest + '?m=api&c=userfollow&a=getFollowStatus', dataName).then(res => {
            //   if (res.data.status == 0) {
            //     this.followStatus = parseInt(res.data.follow_status)==1?true:false
            //   }
            // })
        },
    }
}
</script>

<style scoped>
.qxgzBtn{color: #D32727 !important;background: white;border: 1px solid #D32727;border-radius: 3px;padding: 5px 12px;}
.followItem p{display: flex;justify-content: space-between;align-items: center;margin: 20px 0px;}
.followItem p span{display: flex;align-items: center;}
.followItem p img{margin-right: 10px;}
.public-title{display: flex;justify-content: space-between;align-items: center;}
.public-title span{margin-right: 10px;}
.flTable{width: 100%;border-collapse: collapse;border-spacing: 0px;}
.noDataP{display: flex;align-items: center;justify-content: center;margin: 20px 0px;}
.flTable tr{line-height: 32px;}
.flTable th{border: 1px solid #eee;}
.flTable td{text-align: center;border: 1px solid #EEEEEE;}
.flGtBtn{background: #C8313C;color: white;border: 0px;width: 50px;height: 24px;border-radius: 5px;cursor: pointer;}
.flListPanel{position: absolute;width: 905px;z-index: 9;background: white;height: 500px;}
.flTitle{background: #F9F9F9;color: #78788C;display: flex;align-items: center;justify-content: space-between;padding: 8px;}
.flTitle img{width: 24px;}
.flBox{box-shadow:0px 1px 0px 0px rgba(0,0,0,0.11);padding: 15px;}
.flBoxTlt{display: flex;justify-content: space-between;align-items: center;}
.flBoxTlt div{display: flex;align-items: center;}
.flBoxTlt img{width: 50px;height: 50px;border-radius: 50%;margin-right: 5px;}
.flBoxTlt .levelImg{width: 80px;height: 30px;position: relative;bottom: 3px}
.flBoxTlt button{background: white;border: 1px solid #C8313C;color: #C8313C;height: 30px;border-radius: 4px;width: 80px;cursor: pointer;}
.flBox>p{text-align: center;color: #909090;align-items: center;display: flex;justify-content: center;margin-bottom: 10px;}
.flBox>p img{margin-right: 6px;width: 16px;}
.levelImg{
  width: 40px;
  height: 18px;
  vertical-align: sub;
  display: inline-block;
  margin: 0 5px;
}
.levelImg1{
  width: 24px;
  height: 16px;
  /* background: url("../../../assets/images/room/slevel01@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg2{
  /* background: url("../../../assets/images/room/slevel02@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg3{
  /* background: url("../../../assets/images/room/slevel03@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg4{
  /* background: url("../../../assets/images/room/slevel04@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg5{
  /* background: url("../../../assets/images/room/slevel05@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg6{
  /* background: url("../../../assets/images/room/slevel06@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg7{
  /* background: url("../../../assets/images/room/slevel07@2x.png")no-repeat; */
  background-size: 100% 100%;
}
.levelImg8{
  /* background: url("../../../assets/images/room/slevel08@2x.png")no-repeat; */
  background-size: 100% 100%;
}
</style>
<style>
.flListPanel .ivu-scroll-wrapper{height: 100%;}
.flListPanel .ivu-scroll-container{height: 100% !important;}
</style>


// WEBPACK FOOTER //
// src/components/PersonalCenter/myFollow/myFollow.vue